@import "../../style/input.scss";
.container {
    min-height: 100vh;
    background: #f9f9fa;
    padding: 30rpx 30rpx 100rpx;
    box-sizing: border-box;
}
.insurance-head {
    @include space-between;
}
.insurance-icon {
    width: 100rpx;
    height: 100rpx;
    background: #eff2f5;
    border-radius: 12rpx;
    margin-right: 24rpx;
    flex-shrink: 0;
}

.insurance-msg {
    display: flex;
    justify-content: space-between;
}

.insurance-add-subtract-icon {
    width: 45rpx;
    height: 45rpx;
    margin-right: 24rpx;
}
.insurance-name {
    font-size: $font-large;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.insurance-tips {
    color: #ff7e68;
    font-size: 22rpx;
    background-color: #fff2ef;
    padding: 3rpx 8rpx;
    border-radius: 4rpx;
    margin-left: 9rpx;
}
.insurance-date {
    margin-top: 8rpx;
    color: #646a73;
    .key {
        color: $grey;
    }
}
.statistics {
    font-size: $font-normal;
    width: 100rpx;
    text-align: right;
    flex-shrink: 0;
}
.statistics-icon {
    width: 24rpx;
    height: 24rpx;
}
.insurance-month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;
    .month-box {
        width: 209rpx;
        height: 64rpx;
        background: #04b96a;
        border-radius: 13rpx 12rpx 0rpx 0rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: 9rpx;
    }
}
.insurance-nums {
    height: 154rpx;
    background: $green;
    box-shadow: 0 12rpx 24rpx 0 rgba(134, 145, 163, 0.3);
    border-radius: 12rpx 12rpx 0 0;
    text-align: center;
    color: white;
    @include padding-box(0 30rpx);
    position: relative;
    z-index: 20rpx;
}
.insurance-num {
    font-size: 46rpx;
    margin-top: 30rpx;
    // font-weight: bold;
}
.insurance-btns {
    background-color: white;
    height: 106rpx;
    border-radius: 0 0 12rpx 12rpx;
    font-size: $font-normal;
    @include flex-center();
}
.insurance-btn {
    width: 100%;
    @include flex-center();
}
.line {
    width: 2rpx;
    height: 43rpx;
    background: #eff2f5;
    flex-shrink: 0;
}

.title-block {
    margin-top: 60rpx;
    margin-bottom: 30rpx;
}
.title {
    font-size: $font-normal;
    font-weight: bold;
}
.title-more {
    color: $grey;
}
.more-icon {
    width: 24rpx;
    height: 24rpx;
}

.record-list {
    display: flex;
}

.record {
    margin-right: 12rpx;
    width: 532rpx;
    flex-shrink: 0;
}

// .mini-btn:not([size=mini]) {
//     margin: 0;
//     width: 196rpx;
//     height: 60rpx;
//     font-size: 25rpx;
// }

.purse {
    position: absolute;
    width: 88vw;
    height: 250rpx;
    right: 5rpx;
    top: 0;
}

.policy-amount {
    position: relative;
    font-size: $font-normal;
    line-height: 45rpx;
    z-index: 1;
    top: 20rpx;
    .policy-describe {
        margin-top: 47rpx;
    }
    .name {
        color: #202536;
        font-size: 32rpx;
    }
    .active {
        margin-top: 30rpx;
    }
}

.characters-text {
    font-weight: 600;
}
.remind-autology {
    line-height: 120rpx;
}

.mini-btn.active:not([size="mini"]) {
    margin: 0;
    width: 264rpx;
    background-color: #ffffff;
    border: 2rpx solid #e8e9ea;
    color: #202536;
}

.mini-btn:not([size="mini"]) {
    background: $green;
    border: none;
    color: white;
}
.policy-btn-box {
    margin-top: 60rpx;
    width: 100%;
}
.block-triangle {
    border-color: transparent #04b96a #04b96a transparent;
    border-top-width: 52rpx;
    margin-right: -1rpx;
    border-right-width: 20rpx;
    border-right-width: 20rpx;
}
.picker-box {
    display: flex;
    align-items: center;
}
.month-triangle {
    border-color: #fff transparent transparent transparent;
    margin-left: 10rpx;
}
.status-box {
    display: flex;
    align-items: center;
    padding-top: 24rpx;
    margin-bottom: 20rpx;
    .status-i {
        padding: 13rpx 18rpx;
        box-sizing: border-box;
        border-radius: 8rpx;
        color: #9ea1bb;
        font-size: $font-small;
        background: #ffffff;
        margin-right: 16rpx;
    }
    .status-i-active {
        background: rgba(0, 214, 121, 0.1);
        color: #00d679;
    }
}

.popup_bottom {
    width: 100%;
    margin-top: 60rpx;
    box-sizing: border-box;
    padding: 0 32rpx;
    display: flex;
    justify-content: space-around;

    .cancel {
        color: #202536;
        font-size: 36rpx;
        width: 264rpx;
        height: 92rpx;
        line-height: 92rpx;
        border-radius: 47rpx 47rpx 47rpx 47rpx;
        opacity: 1;
        border: 2rpx solid #e8e9ea;
        text-align: center;
    }

    .sure {
        color: #ffffff;
        font-size: 36rpx;
        text-align: center;
        width: 264rpx;
        height: 92rpx;
        line-height: 92rpx;
        background: #00d679;
        border-radius: 47rpx 47rpx 47rpx 47rpx;
        opacity: 1;
    }
}
